<template>
    <div class="write-container">
        <van-tabs v-model="active">
            <van-tab :name="0" title="写报告"></van-tab>
            <van-tab :name="1" title="影像"></van-tab>
        </van-tabs>
        <div v-if="active == 0" style="padding:0 10px;">
            <div class="unlock-group">锁定当前报告</div>
            <div class="list-group">
                <van-row>
                    <van-col span="6">
                        <div class="list-col-right">检查号：</div>
                    </van-col>
                    <van-col span="6">
                        <div class="list-col-left">{{reportDetail.checkNo}}</div>
                    </van-col>
                    <van-col span="6">
                        <div class="list-col-right">姓名：</div>
                    </van-col>
                    <van-col span="6">
                        <div class="list-col-left">{{reportDetail.name}}</div>
                    </van-col>
                </van-row>
                <van-row>
                    <van-col span="6">
                        <div class="list-col-right">性别：</div>
                    </van-col>
                    <van-col span="6">
                        <div class="list-col-left">{{reportDetail.sex}}</div>
                    </van-col>
                    <van-col span="6">
                        <div class="list-col-right">年龄：</div>
                    </van-col>
                    <van-col span="6">
                        <div class="list-col-left">{{reportDetail.age}}</div>
                    </van-col>
                </van-row>
                <van-row>
                    <van-col span="6">
                        <div class="list-col-right">检查部位：</div>
                    </van-col>
                    <van-col span="6">
                        <div class="list-col-left">{{reportDetail.bodyParts}}</div>
                    </van-col>
                    <van-col span="6">
                        <div class="list-col-right">检查类型：</div>
                    </van-col>
                    <van-col span="6">
                        <div class="list-col-left">{{reportDetail.modality}}</div>
                    </van-col>
                </van-row>
                <van-row>
                    <van-col span="6">
                        <div class="list-col-right">床号：</div>
                    </van-col>
                    <van-col span="6">
                        <div class="list-col-left">{{reportDetail.bedNo}}</div>
                    </van-col>
                    <van-col span="6">
                        <div class="list-col-right">检查日期：</div>
                    </van-col>
                    <van-col span="6">
                        <!-- | formDate -->
                        <div class="list-col-left">{{reportDetail.checkDate }}</div>
                    </van-col>
                </van-row>
                <van-row>
                    <van-col span="6">
                        <div class="list-col-right">科室：</div>
                    </van-col>
                    <van-col span="6">
                        <div class="list-col-left">{{reportDetail.applyDepartmentName}}</div>
                    </van-col>
                    <van-col span="6">
                        <div class="list-col-right">送检医生：</div>
                    </van-col>
                    <van-col span="6">
                        <div class="list-col-left">{{reportDetail.applyDoctor}}</div>
                    </van-col>
                </van-row>
                <van-row>
                    <van-col span="6">
                        <div class="list-col-right">临床诊断：</div>
                    </van-col>
                    <van-col span="6">
                        <div class="list-col-left">{{reportDetail.clinicalDiagnosis}}</div>
                    </van-col>
                </van-row>
            </div>
            <div class="detail-group">
                <div class="group-title">影像所见：</div>
                <div class="detail-group-info">
                    <van-field v-model="reportDetail.imageDescription" rows="5" autosize type="textarea" maxlength="500" placeholder="请输入"
                        show-word-limit />
                </div>
            </div>
            <div class="detail-group">
                <div class="group-title">诊断意见：</div>
                <div class="detail-group-info">
                    <van-field v-model="reportDetail.diagnosisOpinion" rows="5" autosize type="textarea" maxlength="500" placeholder="请输入"
                        show-word-limit /> 
                </div>
            </div>
            <div class="detail-group flex-end" @click="infoShow=true">
                <span class="group-list font-weight">报告结果：</span>
                <span class="detail-list">
                    <span>{{reportDetail.reportmessage}}</span>
                    <van-icon name="arrow" />
                </span>
            </div>
            <!-- ？？啥意思 待问客户 -->
            <!-- <div class="detail-group flex-end" @click="templateShow=true">
                <span class="group-list font-weight">模板：</span>
                <span class="detail-list">
                    <span></span>
                    <van-icon name="arrow" />
                </span>
            </div> -->
            <div style="height:80px;"></div>
            <div class="list-footer">
                <van-button type="info" size="small" round @click="jump(1,'')">预览</van-button>
                      <van-button type="info" size="small" round @click="jump(2,item)" v-if="statusitem == ''" >保存</van-button>
                      <!-- <van-button type="info" size="small" round @click="jump(2,item)" v-if="item == '保存'">保存</van-button> -->
                     
                    <!-- <van-button type="info" size="small" round @click="jump(3,item)" >提交</van-button> -->
                    <van-button type="info" size="small" round @click="jump(4,item)"  v-if="statusitem == '待审核'" >审核</van-button>
                    <!-- <van-button type="info" size="small" round @click="jump(5,item)" >召回</van-button> -->
                <span v-for="(item,index) in reportDetail.buttons" :key="index">
                    <!-- <van-button type="info" size="small" round @click="jump(2,item)" v-if="item == '保存'">保存</van-button>
                    <van-button type="info" size="small" round @click="jump(3,item)" v-if="item == '提交'">提交</van-button>
                    <van-button type="info" size="small" round @click="jump(4,item)" v-if="item == '审核'">审核</van-button>
                    <van-button type="info" size="small" round @click="jump(5,item)" v-if="item == '召回'">召回</van-button> -->
                </span>
            </div>
        </div>
        <!-- 展示影像 -->
        <div v-if="active == 1">
            <!-- <iframe style="width:100%;height:90vh;" :src="path+'/public/m_toDicom.html?v='+Date.now()" frameborder="0"></iframe> -->
          <iframe style="width:100%;height:90vh;" :src="dcmviewsrc" frameborder="0"></iframe>
      
        </div>
        <div class="left-model-button" @click="show=true">诊断模板</div>
        <van-popup v-model="show" position="right" :style="{width:'60%',height:'100%'}">
            <div style="width:100%;height:100%;background-color:#fff;">
                <div style="height:50%;" class="scrollbar">
                    <report-tree :callback="treeBack"/>
                </div>
                <div class="report-list-group">
                    <div class="report-list">
                        <span class="report-list-title">部位：</span>
                        <span class="report-list-result">{{treeInfo.bodyPartStr}}</span>
                    </div>
                    <div class="report-list">
                        <span class="report-list-title">检查类型：</span>
                        <span class="report-list-result">{{treeInfo.checkType}}</span>
                    </div>
                    <div class="report-list">
                        <span class="report-list-title">模板名称：</span>
                        <span class="report-list-result">{{treeInfo.templateName}}</span>
                    </div>
                    <div class="report-list">
                        <span class="report-list-title">影像所见：</span>
                        <span class="report-list-result">{{treeInfo.imageFinding}}</span>
                    </div>
                    <div class="report-list">
                        <span class="report-list-title">诊断意见：</span>
                        <span class="report-list-result">{{treeInfo.diagnoseOpinion}}</span>
                    </div>
                </div>
                <div class="report-footer">
                    <van-button type="info" size="small" round @click="addReportMethod(1)">覆盖</van-button>
                    <van-button type="info" size="small" round @click="addReportMethod(2)">追加</van-button>
                </div>
            </div>
        </van-popup>
        <van-action-sheet v-model="infoShow" :actions="infoActions" @select="onSelect1" />
        <!-- @select="onSelect2" -->
        <van-action-sheet v-model="templateShow" :actions="templateActions"  />
     
        <!-- // 未提交前 都是pdf 预览 -->
 
        <van-popup closeable v-model="dialogBg" position="bottom" :style="{ height: '100%' }">
            <iframe v-if="dialogBg" :src="pdfUrl" frameborder="0" style="width:100%;height:88%;margin-top:12%;"></iframe>
        </van-popup>

           <!-- v2 -->
        <!-- <van-popup closeable v-model="dialogBg" position="bottom" :style="{ height: '100%',background:'#000'}">
            <img :src="pdfUrl" style="width:100%;height:88%;margin-top:12%;object-fit: contain;background:#fff;">
        </van-popup> -->

    </div>
</template>

<script>
import {Toast, Dialog, Tab, Tabs, ActionSheet, Tag, Button, Field, List, CellGroup, Col, Row ,Popup , Icon,Overlay} from "vant";
import reportTree from '@/view/common/reportTree';
import { getdate1 } from "@/utils/utils";
export default {
    name:'mobileWrite',
    components: {
        reportTree,
        [Dialog.Component.name]: Dialog.Component,
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
        [ActionSheet.name]: ActionSheet,
        [Tag.name]: Tag,
        [Button.name]: Button,
        [Field.name]: Field,
        [List.name]: List,
        [CellGroup.name]: CellGroup,
        [Col.name]: Col,
        [Row.name]: Row,
        [Popup.name]: Popup,
        [Icon.name]: Icon,
        [Overlay.name]: Overlay,
    },
    data() {
        return {
            path:this.$API.DOMAIN_NAME,
            active:0,
            message:'',
            infoShow:false,
            templateShow:false,
            show:false,
            dialogBg:false,
            reportDetail:{
                reportmessage:""
            },
            treeInfo:{},
            infoActions:[{ id:1,name: '阴性' }, { id:2,name: '阳性'}],
            templateActions:[{ name: '医院' }],
            pdfUrl:'',
            dcmviewsrc:"",
             token:"",
             nt:'',
             checkno:'',
             hoscode:'',
             checkdate:'',
             statusitem:'',
             statusid:''
           
        };
    },
    filters: {
        formDate: (val) =>getdate1(val)
    },
    mounted() {
        this.id=this.$route.query.id;
        this.token = this.$route.query.token;
        this.nt = this.$route.query.nt;
        this.checkdate = this.$route.query.checkdate;
        console.log("chuci")

                // lianke =================
          let expires=this.getQueryVariable22('expires');
          let signature=this.getQueryVariable22('signature');
          let serverAddr=this.getQueryVariable22('serverAddr');
        
          this.checkno=this.getQueryVariable22('checkno');
          this.hoscode=this.getQueryVariable22('hoscode');
          let hospitalId=this.getQueryVariable22('hoscode');
      console.log("sdfdsf",signature);
        
                        var targetApp="viewer";
                        var vc = "link"; //vendor code
                        // var hostAddr = "view.blue-imaging.com"; // 蓝影
                        var hostAddr =this.$API.DCM_viewurlv1;
                        //  var hostAddr = "pacs.link-imaging.com";//window.location.host;
                         //Url过期时间（单位为秒）
                        // var expires = data.expires;                 
                        // var signature =data.signature;          
                        // var serverAddr =data.serverAddr;
                        var linkviewurl = "https://" + hostAddr + "/Viewer/Index"
                        linkviewurl = linkviewurl + "?ds=rest" + "&serverAddr=" + serverAddr + "&vc=" + vc +
                        "&expires=" + expires + "&signature=" + signature + "&targetApp=" + targetApp;
                       
                        linkviewurl += "&fmPos=viewer&opts=film&hosId=" + hospitalId;
                        
                        //  window.open(linkviewurl, "Viewer");//打开连接
                        this.dcmviewsrc=linkviewurl;


       // 详情
        this.getDetail()
    },
    methods: {
        getDetail() {

    //   if(this.hoscode==""){
    //     Toast.fail("缺少医院ID");return false;
    //   }

    //   if(this.checkdate==""){
    //     Toast.fail("缺少检查日期");return false;
    //   }



            const loading = this.$loading({ text: '加载中' });

            
        //      this.token = this.$route.query.token;
        // this.nt 
            //  let para={ zid: data.id,token:data.token,nt:data.totime,checkno:data.checkno,hoscode:data.hospitalid };
            let para={zid:this.id,token:this.token,nt:this.nt,checkno:this.checkno,hoscode:this.hoscode,checkdate:this.checkdate}
            // , para
            this.$http.get(this.$API.MOBILE_REPORT_DETAILv2+this.id)
                .then((res) => {
                    loading.close();
                    console.log('登录信息', res)
                    if (res.code == 200) {
                        this.reportDetail=res.data;
                        this.reportDetail.reportmessage="";
                    }
                })
        },
        jump(flag,item) {
            // console.log(111,item);
            if(flag==2){
                // 2是保存
                // this.reportDetail.zid=this.id;
                // this.reportDetail.buttons=item;
                if(this.reportDetail.reportmessage==""){
                    Toast.fail("请选择报告结果");return false;
                }
              


                // console.log(this.reportDetail);return false;
                   this.reportDetail.patientId=this.id; 
                const loading = this.$loading({ text: '提交中' });
                // MOBILE_REPORT_TREE_EDITv202
                // console.log(this.reportDetail);return false;
                this.$http.put(this.$API.MOBILE_REPORT_TREE_EDITv2, this.reportDetail)
                    .then((res) => {
                        loading.close();
                        console.log('登录信息', res.data)
                        if (res.code == 200) {
                            Toast.success('操作成功');
                            this.statusitem="待审核";
                            this.statusid=res.data;
                            // this.getDetail()
                        }else{
                            Toast.fail(res.msg);
                        }
                    })
            } else if(flag==4){
                // 4 审核
                // this.reportDetail.zid=this.id;
                // this.reportDetail.buttons=item;
                   this.reportDetail.patientId=this.id; 
                const loading = this.$loading({ text: '提交中' });

                // this.reportDetail.patientId=this.id; 


                // this.reportDetail.imageDescription=this.treeInfo.imageFinding;
                // this.reportDetail.diagnosisOpinion=

                if(this.reportDetail.reportmessage==""){
                    Toast.fail("请选择报告结果");
                }
              
                let para={"checkStatus":1,"patientReportId":parseInt(this.statusid),"imageDescription":this.reportDetail.imageDescription,
                    "diagnosisOpinion":this.reportDetail.diagnosisOpinion,"result":this.reportDetail.result                };
                this.reportDetail.checkStatus=1; 
                // +"/"+this.statusid
                this.$http.post(this.$API.MOBILE_REPORT_TREE_EDITv202, para)
                    .then((res) => {
                        loading.close();
                        console.log('登录信息', res)
                        if (res.code == 200) {
                            Toast.success('操作成功');
                            this.getDetail()
                        }else{
                            Toast.fail(res.msg);
                        }
                    })
            }else{
                let url=this.$API.DOMAIN_NAME+this.$API.MOBILE_REPORT_VIEWREPORT+'?id='+this.id+'&.pdf';
                this.pdfUrl= `${this.$API.DOMAIN_NAME}/web/pdf/web/viewer.html?file=${encodeURIComponent(url)}`;
                this.dialogBg=true;
                // 维持原样klda也是
                // this.$http
                // .post(this.$API.MOBILE_REPORT_DETAIL, { zid: this.id,token:this.token,nt:this.nt})
                // .then((res) => {
                // if (res.code == 1) {
                //     console.log('res',res);
                //     this.pdfUrl=res.data.reporturl_site;
                //     this.dialogBg=true;
                // } else {
                //     Toast.fail(res.msg);
                // }
                // });
            }
        },
        treeBack(e){
            // 模板选择
            // console.log(111,e);
            if(e){
                this.treeInfo=e;
            }
        },
        addReportMethod(flag){
            if(flag == 1){
                this.reportDetail.imageDescription=this.treeInfo.imageFinding;
                this.reportDetail.diagnosisOpinion=this.treeInfo.diagnoseOpinion;
            }else{
                this.reportDetail.imageDescription=this.reportDetail.imageDescription+this.treeInfo.imageFinding;
                this.reportDetail.diagnosisOpinion=this.reportDetail.diagnosisOpinion+this.treeInfo.diagnoseOpinion;
            }
            this.show=false;
        },
        onSelect1(e){
            console.log(e);
            this.reportDetail.reportmessage=e.name;
            this.reportDetail.result=e.id;
            this.infoShow=false;

        },
        onSelect12(e){
            this.templateShow=false;
        },
             getQueryVariable22(variable){
                //var query = window.location.search.substring(1);
                var query = window.location.href;         
                var vars = query.split("&");
                // console.log('*************************jwtToken22221',query)
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == variable) {
                        return pair[1];
                    }
                }
                return '';
            }
    },
};
</script>

<style scoped lang="less">
.write-container {

    .unlock-group {
        padding: 10px;
        font-size: 16px;
        color: #333;
        box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        margin-top: 10px;
    }

    .list-group {
        box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        margin-top: 10px;
        padding: 10px;
    }

    .list-col-right {
        height: 34px;
        line-height: 34px;
        font-size: 12px;
        text-align: right;
        font-weight: bold;
    }

    .list-col-left {
        height: 34px;
        line-height: 34px;
        font-size: 12px;
        padding-left: 10px;
    }

    .detail-group {
        box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        margin-top: 10px;
        padding: 10px;
    }

    .group-title {
        font-size: 12px;
        font-weight: bold;
    }

    .detail-group-info {
        line-height: 24px;
        font-size: 16px;
    }

    .flex-end {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .list-group {
        font-size: 16px;
    }

    .font-weight {
        font-weight: bold;
    }

    .list-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        position: fixed;
        background: #fff;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 10;
    }
    .left-model-button{
        position: fixed;
        z-index: 20;
        top:100px;
        right:0;
        width: 40px;
        padding:10px;
        line-height: 24px;
        font-size: 16px;
        background: #9acafc;
        border-radius: 6px 0  0 6px;
        color:#fff;
    }
    .report-list-group{
        padding:10px;
        background: #eee;
        .report-list{
            line-height: 26px;
        }
        .report-list-title{
            font-size: 14px;
            color:#9acafc;
        }
        .report-list-result{
            font-size: 14px;
            color:#333;
            padding-left:4px;
        }
    }
    .report-footer{
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding:20px 10px;
    }
}
</style>
<style>
.write-container .list-footer .van-button {
    width: 70px;
}
.write-container .report-footer .van-button {
    width: 48%;
}
</style>